<template>
  <div>
    <div class="button-list">
      <el-button type="primary" size="small" v-on:click="getTasks()">刷新</el-button>
      <el-button type="success" size="small" v-on:click="addSpider()">添加</el-button>
      <el-button type="danger" size="small">删除</el-button>
    </div>
    <div class="table-content">
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"> // TODO: fixit
        <el-table-column
          fixed
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="任务名称"
          prop="name"
          width="120">
          <!--<template scope="scope">{{ scope.row.date }}</template>-->
        </el-table-column>
        <el-table-column
          prop="type_spider"
          label="爬虫类型"
          width="120">
        </el-table-column>
        <el-table-column
          prop="proxy"
          label="是否使用代理"
        >
        </el-table-column>
        <el-table-column
          prop="type_template"
          label="模版类型"
        >
        </el-table-column>
        <el-table-column
          prop="type_business"
          label="业务类型"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="240">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                size="small"
                type="warning"
                @click="handleEdit(scope.$index, scope.row)">修改</el-button>
              <el-button
                size="small"
                type="success"
                @click="handleDelete(scope.$index, scope.row)">执行任务</el-button>
              <el-button
                size="small"
                type="info"
                @click="handleEdit(scope.$index, scope.row)">执行记录</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>
  .button-list {
    margin-bottom: 10px;
  }
</style>

<script>
  import {gainTasks} from '../apis/api'
  export default {
    data () {
      return {
        tableData: [],
        multipleSelection: [],
        jsondata: ''
      }
    },
    created () {
      this.getTasks()
    },
    methods: {
      toggleSelection (rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      handleSelectionChange (val) {
        this.multipleSelection = val
      },
      deleteRow (index, rows) {
        rows.splice(index, 1)
      },
      handleEdit (index, row) {
        alert(row)
      },
      handleDelete (index, row) {
        alert(index, row)
      },
      addSpider () {
//        this.$http.get('http://localhost:6800/listjobs.json?project=nlproject').then(function (data) {
//          debugger
//        }, response => {
//        })
        this.$store.dispatch('addTab', {'tab': {
          title: '添加爬虫',
          name: '1-5',
//          content: '<proxy></proxy>',
//          proxy: true,
          components: '1-5',
          closed: true
        },
          'activeName': '1-5'})
        this.$router.push({path: '/spiderCreate'})
      },
      getTasks () {
        const _this = this
        gainTasks(0).then(response => {
          let dataArray = response.data
          _this.tableData.splice(0, _this.tableData.length)
          dataArray.forEach(function (value) {
            _this.tableData.push(value)
          })
        }).catch(error => {
          console.log(error)
        })
      }
    }
  }
</script>
